import React, { useState, useEffect } from 'react';
import { Form, Button, Select, Input, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import AntdWrapper from '@/components/AntdWrapper';
import { customTrimFunc } from '@/utils/utils.jsx';
import IconFont from '@/components/IconFont';
import { listNoticeTypes } from '../service';
import { isEmpty } from 'lodash';

const { Option } = Select;

const SearchContent = ({ query, handleSearch }) => {
  const [form] = Form.useForm();
  const [noticeList, setNoticeList] = useState([]); //提醒类型的数据
  //   const [loading, setLoading] = useState(false);

  useEffect(() => {
    form.resetFields();
  }, [query]);

  useEffect(() => {
    getListNoticeTypes();
  }, []);

  //获取提醒类型的数据
  const getListNoticeTypes = async () => {
    const { success, data = [] } = await listNoticeTypes();
    if (success) {
      setNoticeList(data);
    }
  };

  //点击重置
  const onReset = () => {
    handleSearch();
  };

  const options =
    !isEmpty(noticeList) &&
    noticeList.map((d) => (
      <Option value={d.noticeType} key={d.noticeType} label={d.noticeTypeName}>
        <Tooltip title={d.noticeTypeName}>{d.noticeTypeName}</Tooltip>
      </Option>
    ));

  return (
    <Form
      form={form}
      className="new-search-form-style"
      onFinish={() => handleSearch(customTrimFunc(form.getFieldValue()))}
      name="express-warning-search-form"
      initialValues={{ ...query }}
    >
      <AntdWrapper label="提醒类型">
        <Form.Item label="" name="noticeTypes" colon={false}>
          <Select mode="multiple" placeholder="请选择" allowClear>
            {options}
          </Select>
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="联系人">
        <Form.Item label="" name="name">
          <Input placeholder="请输入联系人" />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="状态">
        <Form.Item label="" name="state" colon={false}>
          <Select placeholder="请选择" allowClear>
            <Option value={0}>关闭</Option>
            <Option value={1}>开启</Option>
          </Select>
        </Form.Item>
      </AntdWrapper>

      <Form.Item label=" " colon={false} style={{ width: 260 }}>
        <Button
          type="primary"
          htmlType="submit"
          style={{ marginRight: '8px', height: '32px', fontSize: '12px' }}
          shape="round"
          icon={<SearchOutlined />}
        >
          查询
        </Button>
        <Button
          onClick={onReset}
          shape="round"
          icon={<IconFont type="iconformReset" />}
          className="newRoundBtn"
        >
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default SearchContent;
